.container {
	position: relative;
}
.container::before {
	content: '';
	display: block;
	height: 60rpx;
	background-color: $uni-bg-color;
	position: absolute;
	z-index: -1;
	width: 100%;
}

.header-box {
	border-radius: 60rpx;
	background-color: #fff;
	// min-height: 100vh;
	padding: 0 40rpx;
}
		
.header-box{
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.top-box {
	display: flex;
	justify-content: space-between;
	padding:20rpx 40rpx;
	.left-box{
		display: flex;
		align-items: center;
		.name-box{
			font-size: 32rpx;
		}
		.lv-box{
			font-size: 24rpx;
		}
		.avatar-box{
			width: 14vw;
			height: 14vw;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	.info-btn{
		.icon-t{
			width: 8vw;
			height: 8vw;
		}
	}
}
.feature-box{
	display: flex;
	justify-content: space-around;
	font-size: 24rpx;
	text-align: center;
}
.bonus-box{
	padding: 10rpx 20rpx;
	.content-box{
		display: flex;
		justify-content: space-between;
		background-color:  #ececec;
		padding:20rpx;
		border-radius: 10rpx;
		align-items: center;
		.text-h{
			font-size: 28rpx;
		}
		.text-p{
			font-size: 24rpx;
		}
	}
}
.order-box,.archives-box{
	margin-bottom: 20rpx;
	padding: 20rpx;
	padding-top: 0;
	background-color: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	.top-box{
		align-items: flex-end;
		border-bottom: 1px solid #eee;
	}
	.left-box{
		font-size: 28rpx;
	}
	.right-box{
		font-size: 24rpx;
	}
	.content-box{
		display: flex;
		padding-top: 20rpx;
		.item-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			font-size: 24rpx;
			img{
				width: 10vw;
				height: 10vw;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}
		}
	}
}